<template>
  <div class="img-detail">
    <my-header titleName="图文详情"></my-header>
    <div>
      <h3 class="img-title">{{imgInfo.title}}</h3>
      <p class="img-info">
        <span class="time">{{imgInfo.add_time|filterTime}}</span>
        <span>{{imgInfo.click}}次点击</span>
        <span>分类:xxxx</span>
      </p>
    </div>
    <ul>
      <li>
        <div>
          <img class="previewer-demo-img" v-for="(item, index) in list" :key="index" :src="item.src" width="100" @click="show(index)">
          <div v-transfer-dom>
            <previewer :list="list" ref="previewer" @on-index-change="logIndexChange"></previewer>
          </div>
        </div>
      </li>
    </ul>
    <div class="content" v-html="imgInfo.content"></div>
    <mycomment></mycomment>
  </div>
</template>
<script>
import { getimgMage, getMageInfo } from '@/api'
import { Previewer, TransferDom } from 'vux'
import myHeader from '@/components/myHeader'
import mycomment from '@/components/mycomment'

export default {
  directives: {
    TransferDom
  },
  components: {
    Previewer,
    myHeader,
    mycomment
  },
  data () {
    return {
      list: [],
      imgInfo: []
    }
  },
  created () {
    this.initImgMage()
    this.initMageInfo()
  },
  methods: {
    initImgMage () {
      getimgMage(this.$route.params.id)
        .then(res => {
          console.log(res)
          this.list = res.message
        })
    },
    initMageInfo () {
      getMageInfo(this.$route.params.id)
        .then(res => {
          console.log(res)
          this.imgInfo = res.message[0]
        })
    },
    logIndexChange (arg) {
      console.log(arg)
    },
    show (index) {
      this.$refs.previewer.show(index)
    }
  }
}
</script>

<style lang="less">
  img {
    width: 33.33333%;
    height: 100%;
  }
  li {
    // display:flex;
  div {
    float: left;

    }
  }

</style>

<style lang="less" scoped>
.img-detail {
  margin-top: 45px;
  margin-bottom: 55px;

  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
